import React, { FC } from 'react'
import { Typography } from 'antd'
import { useDispatch } from 'react-redux'
import { nanoid } from 'nanoid'
import { componentConGroup, ComponentConfigType } from '../../../components/QuestionComponents'
import styles from './ComponentLib.module.scss'
import { addComponnet } from '../../../store/componetnsReducer'
const { Title } = Typography


const ComponentLib: FC = () => {
  const dispatch = useDispatch()
  const getComponent = (c: ComponentConfigType, i: number) => {
    const { title, type, Component, defaultProps } = c
    function handleClick() {
      dispatch(
        addComponnet({
          fe_id: nanoid(),
          title,
          type,
          props: defaultProps,
        })
      )
    }
    return (
      <div className={styles.wrapper} onClick={handleClick} key={i}>
        <div className={styles.component}>
          <Component />
        </div>
      </div>
    )
  }
  return (
    <>
      {componentConGroup.map((group, index) => {
        const { groupId, groupName, components } = group
        return (
          <div key={groupId}>
            <Title level={3} style={{ fontSize: '16px', marginTop: index > 0 ? '20px' : '' }}>
              {groupName}
            </Title>
            <div>{components.map((c, i) => getComponent(c, i))}</div>
          </div>
        )
      })}
    </>
  )
}

export default ComponentLib
